<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
				list-style: none;
			}
			
			#box{
				width:600px;
				height:500px;
				border:1px solid red;
			}
			#box div{
				width:100px;
				height:100px;
				background: red;
				position:absolute;
				top:0;
				left:0;
				     /*执行时间 延时 运动名 运动曲线  重复次数    切换*/
				animation:1s     2s  run   linear   infinite alternate;
				/*-webkit 内核 苹果／谷歌*/
				/*-webkit-animation: 1s run;*/
				/*-moz 火狐*/
				/*-moz-animation: 1s run;*/
				/*-ms ie 浏览器*/
				/*-ms-animation: 1s run;*/
				
			}
			/*关键帧动画*/
			
			@keyframes run{
				
				15%{
					left:500px;
					top:0px;
				}
				25%{
					left:500px;
					top:0px;
				}
				50%{
					left:500px;
					top:400px;
				}
				75%{
					left:0px;
					top:400px;
				}
				
			}
			@keyframes run2{
				from{
					left:500px;
					top:0px;
				}
				to{
					left:500px;
					top:400px;
				}
			}
			#box:hover div{
				/*让帧动画暂停 paused*/  
				/*animation-play-state: paused;*/
			}
		</style>
		
	</head>
	<body>
		<div id="box">
			<div></div>
		</div>
		
	</body>
</html>
